
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="https://cdn.bootcss.com/highcharts/4.2.5/highcharts.js" type="text/javascript" ></script> 
	<script src="jquery.scrollLoading.js" type="text/javascript" ></script>  
    <style> 
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            background-color: #EBEBEB;
			overflow:hidden;

        }

        #report_table{
            width:100%; 
			height:100%;
			overflow:auto;

        }
        #report_table .chart{
            margin:auto;
            border-bottom:1px solid #A4BED4;
            width: 100%;
            height:400px;
        } 

    </style>
	<script>

		$(function(){ 
			$(".chart").each(function(index,elem ){ 
				$(elem ).scrollLoading({ 
					container: $("#report_table"), //滚动对象，监听该对象的滚动事件，很关键。
					callback: function(){ //加载到可见范围的回调事件
						loadChart($(elem )); 
					},
					preloadHeight:400 //预加载高度
				}); 
			});
			
			function loadChart(obj){
				var options = {
					title: {
						text: $(obj).attr("id")
					},
					subtitle: {
						text: '数据来源：thesolarfoundation.com'
					},
					yAxis: {
						title: {
							text: '就业人数'
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'middle'
					},
					plotOptions: {
						series: {
							label: {
								connectorAllowed: false
							},
							pointStart: 2010
						}
					},
					series: [{
						name: '安装，实施人员',
						data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
					}, {
						name: '工人',
						data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
					}, {
						name: '销售',
						data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
					}, {
						name: '项目开发',
						data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
					}, {
						name: '其他',
						data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
					}],
					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'center',
									verticalAlign: 'bottom'
								}
							}
						}]
					}
				};

				
				setTimeout(function(){
					obj.highcharts(options);
				},800);
				
			} 
		});
	</script>
      
</head>
<body>
    <div id="report_table">
		<div class="chart" id="chart1"></div>
		<div class="chart" id="chart2"></div>  
		<div class="chart" id="chart3"></div>
		<div class="chart" id="chart4"></div>
		<div class="chart" id="chart5"></div>
		<div class="chart" id="chart6"></div>
		<div class="chart" id="chart7"></div>
		<div class="chart" id="chart8"></div>
		<div class="chart" id="chart9"></div>
		<div class="chart" id="chart10"></div> 
		<div class="chart" id="chart11"></div>
		<div class="chart" id="chart12"></div>  
		<div class="chart" id="chart13"></div>
		<div class="chart" id="chart14"></div>  
		<div class="chart" id="chart15"></div>
		<div class="chart" id="chart16"></div>
		<div class="chart" id="chart17"></div>  
 
	</div> 
    
</body>
</html>